<template>
  <div class="cart-container" :style="{ bottom: bottom }">
    <!-- 购物车列表栏 -->
    <van-popup v-model="showList" round position="bottom" :duration="0.2" :style="{ height: cartHeight, bottom: cartBottom }">
      <div class="clear-box">
        <span class="clear-text" @click="clearAll">{{ $t('h.menuPage.clearAll') }}</span>
      </div>
      <div class="goods-box">
        <div v-for="(item, index) in shoppingCart" :key="index">
          <van-card
            :desc="item.discount_amount > 0 ? '$' + item.price : ''"
            :tag="item.discount_amount > 0 ? $t('h.menuPage.discount') : ''"
            :price="item.discount_amount > 0 ? item.price - item.discount_amount + '.00' : item.price + '.00'"
            :title="item.name"
            :thumb="item.image_thumbnail_cdn ? item.image_thumbnail_cdn : localImg"
            currency="$"
          >
            <template #tags>
              <Count :goodsItem="item" :itemType="item.type"></Count>
            </template>
          </van-card>
        </div>
      </div>
    </van-popup>

    <!-- 支付栏 -->
    <div class="pay-bar">
      <div class="review-box" @click="viewShoppingCart">
        <div class="review-text">
          <van-icon name="arrow-down" v-show="!showList" />
          <van-icon name="arrow-up" v-show="showList" />
          <span>{{ $t('h.menuPage.review') }}</span>
        </div>
        <div class="cart-icon">
          <van-icon name="shopping-cart" />
          <span class="goods-num">X{{ totalNum }}</span>
        </div>
      </div>
      <div class="pay-box" :style="{ backgroundColor: payColor }" @click="goPayment">
        <div class="pay-title">{{ $t('h.menuPage.pay') }}</div>
        <div class="amount-box">
          <div class="currency">$</div>
          <div class="amount">{{ totalAmount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Cart',
  data() {
    return {
      showList: false,
      bottom: '50px',
      cartBottom: '96px',
      localImg: 'static/img/mxbc/Ice_Cream/Purple_Potato_Latte.jpeg'
    }
  },
  // 初始化购物车和支付栏位置
  created() {
    var path = this.$route.name
    if (path === 'goods') {
      this.bottom = '50px'
      this.cartBottom = '96px'
    } else {
      this.bottom = 0
      this.cartBottom = '46px'
    }
  },
  // 返回商家列表清除购物车
  beforeDestroy() {
    var name = this.$route.name
    if (name === 'shops') return this.clearAll()
  },
  computed: {
    // init shopping cart data & shops data
    ...mapState({
      initGoodsList: state => state.home.shopsGoods,
      initShoppingCart: state => state.home.initShoppingCart,
      shoppingCart: state => state.home.shoppingCart,
      shopsConfig: state => state.home.shopsConfig
    }),
    // 计算购物车总数
    totalNum() {
      return this.initShoppingCart.length
    },
    // 计算购物车列表最高高度
    cartHeight() {
      var num = this.shoppingCart.length
      if (num > 5) return '416px'
      return num * 76 + 36 + 'px'
    },
    // 计算购物车总金额、含税金额
    totalAmount() {
      var config = this.shopsConfig
      var list = this.initShoppingCart
      var amount = 0
      list.forEach(item => {
        if (item.discount_amount > 0) {
          amount += item.price - item.discount_amount
        } else {
          amount += item.price
        }
      })
      if (config.tax) return Math.round((amount += amount * config.tax_rate * 0.01) * 100) / 100
      return amount
    },
    // 计算变化支付按钮颜色
    payColor() {
      var min = this.shopsConfig.delivery_order_min
      var num = this.totalAmount
      if (num < min) return '#c9c9c9'
      return '#ffbf05'
    }
  },
  watch: {
    // 监听购物车为 0 时状态
    initShoppingCart(list) {
      if (list.length === 0) {
        this.showList = false
        this.clearStatus = false
      }
    }
  },
  methods: {
    // 查看购物车列表
    viewShoppingCart() {
      var arr = this.initShoppingCart
      if (arr.length === 0) return this.$msg.warning('请先加入商品')
      this.showList = !this.showList
    },
    // 清除购物车全部数据
    clearAll() {
      var list = this.initGoodsList
      this.$store.state.home.initShoppingCart = []
      this.$store.state.home.shoppingCart = []
      this.$store.state.account.submitOrderData = []
      if (list.length > 0) {
        list.forEach(item => {
          if (item.amount > 0) {
            this.$set(item, 'amount', 0)
          }
        })
      }
    },
    // 结算购物车订单
    goPayment() {
      var min = this.shopsConfig.delivery_order_min
      var num = this.totalAmount
      if (num < min) return this.$msg.warning('最低消费' + min)
      this.$router.push({ name: 'create' })
    }
  }
}
</script>

<style lang="less" scoped>
.cart-container {
  position: fixed;
  width: 100%;
  bottom: 50px;
  max-width: 640px;
  z-index: 99;
}
.pay-bar {
  position: relative;
  display: flex;
  width: 100%;
  height: 46px;
  background-color: white;
  z-index: 9999;
  box-shadow: 0px -1px 3px -1px #e8e8e8;
  .review-box {
    display: flex;
    align-items: center;
    width: 50%;
    padding: 0 15px;
    .review-text {
      .van-icon {
        font-size: 0.9em;
      }
      span {
        font-size: 0.9em;
      }
    }
    .cart-icon {
      margin-left: 9px;
      font-size: 1.5em;
      color: #ffbf05;
    }
    .goods-num {
      font-size: 0.6em;
    }
  }
  .pay-box {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0 6px;
    .pay-title {
      display: flex;
      align-items: center;
      height: 40%;
      font-size: 0.7em;
      font-weight: 600;
      color: white;
    }
    .amount-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60%;
      font-size: 1.5em;
      font-weight: 600;
      color: #666666;
    }
  }
}
.van-popup--bottom {
  .clear-box {
    position: fixed;
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 0.9em;
    background-color: white;
    border-radius: 16px 16px 0 0;
    z-index: 1;
    .clear-text {
      margin-left: 1em;
    }
  }
  .goods-box {
    position: relative;
    top: 36px;
    .van-card {
      .van-card__header {
        height: 60px;
        .van-card__content {
          min-height: 60px;
          .van-card__title {
            font-size: 1.2em;
            font-weight: 660;
          }
          .van-card__price {
            color: red;
            .van-card__price-integer {
              font-size: 1.2em;
            }
            .van-card__price-currency {
              font-size: 1.2em;
            }
          }
          .van-card__desc {
            text-decoration: line-through;
          }
        }
        .van-card__thumb {
          height: 60px;
          width: 60px;
          .van-image {
            width: 100%;
            height: 100%;
            .van-image__img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      /deep/ .count-box {
        position: absolute;
        bottom: 21px;
      }
    }
  }
}
</style>
